<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Add new post &laquo; Admin</title>
  <link rel="stylesheet" href="../static/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../static/assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="../static/assets/vendors/nprogress/nprogress.css">
  <link rel="stylesheet" href="../static/assets/css/admin.css">
  <script src="../static/assets/vendors/nprogress/nprogress.js"></script>
</head>
<body>
  <script>NProgress.start()</script>

  <div class="main">
    <!-- 引入公共的顶部 -->
    <?php include "public/_navBar.php"?>
    <div class="container-fluid">
      <div class="page-title">
        <h1>写文章</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <form class="row">
        <div class="col-md-9">
          <div class="form-group">
            <label for="title">标题</label>
            <input id="title" class="form-control input-lg" name="title" type="text" placeholder="文章标题">
          </div>
          <div class="form-group">
            <label for="content">标题</label>
            <textarea id="content" class="form-control input-lg" name="content" cols="30" rows="10" placeholder="内容"></textarea>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="slug">别名</label>
            <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
            <p class="help-block">https://zce.me/post/<strong>slug</strong></p>
          </div>
          <div class="form-group">
            <label for="feature">特色图像</label>
            <!-- show when image chose -->
            <img id="divImg" class="help-block thumbnail" style="display: none">
            <input name="src" type="hidden" id="img">
            <input id="feature" class="form-control" name="feature" type="file">
          </div>
          <div class="form-group">
            <label for="category">所属分类</label>
            <select id="category" class="form-control" name="category">
              
            </select>
          </div>
          <div class="form-group">
            <label for="created">发布时间</label>
            <input id="created" class="form-control" name="created" type="datetime-local">
          </div>
          <div class="form-group">
            <label for="status">状态</label>
            <select id="status" class="form-control" name="status">
                <!-- <option value="drafted">草稿</option>
                <option value="published">已发布</option>
                <option value="trashed">已删除</option> -->
            </select>
          </div>
          <div class="form-group">
            <button id="btnSave" class="btn btn-primary" type="button">保存</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- 引入公共的侧边栏 -->
  <?php 
    $currentPage = 'post-add';
    $currentPage1 = 'post-add';
   ?>
  <?php include "public/_aside.php"?>

  <script src="../static/assets/vendors/jquery/jquery.min.js"></script>
  <script src="../static/assets/vendors/bootstrap/js/bootstrap.js"></script>
  <script>NProgress.done()</script>
  <!-- 引入富文本编辑器 -->
  <script src="../static/assets/vendors/ckeditor/ckeditor.js"></script>
</body>

<script>
    $(function(){
        
        //页面打开自动加载文章的分类
        $.ajax({
            type:"post",
            url:"api/_getCategoriesData.php",
            success:function(res){
                var data = res.data;
                var str = "";
                if(res.code==1){
                    $.each(data,function(index,val){
                        str+=`<option value="${val.id}">${val.name}</option>`;
                    });
                    $("#category").append($(str));
                }
            }
        });

        //页面打开加载文章的状态
        $.ajax({
            type:"post",
            url:"api/_getPostStatus.php",
            success:function(res){
                var data = res.data;
                var str = "";
                if(res.code==1){
                    $.each(data,function(index,val){
                        str+=`<option value="${val.id}">${val.name}</option>`;
                    });
                    $("#status").append($(str));
                }
            }
        });
       

        //点击上传文件  把文件上传到后台
        $("#feature").on("change",function(){
            var file = this.files[0];
            var data = new FormData();
            data.append("file",file);
            $.ajax({
                type:"post",
                url:"api/_upload.php",
                contentType:false,
                processData:false,
                data:data,
                success:function(res){
                    //如果上传成功,获取返回来的图片路径,把获取的图片路径放到img的src中
                    $("#divImg").show().attr("src",res);
                    $("#img").val(res);
                }
            });
        });

        //富文本编辑器 插件
        CKEDITOR.replace("content");
        //点击保存
        $("#btnSave").on("click",function(){
            //获取文件的路径
            var src = $("#divImg").attr("src");
            // console.log(src);
            //收集数据之前,要先将文本域的内容更新到文本域中
            //如果把编辑器中的内容更新到对应的文本域里面
            // console.log(CKEDITOR.instances);
            CKEDITOR.instances.content.updateElement();//把编辑器的内容更新到文本域中2
            //收集表单数据
            var formData = $(".row").serialize(); //获取具有name属性的value的值
            // console.log($(".row").serialize());
            
            //发送请求到后台
            $.ajax({
                type:"post",
                url:"api/addPosts.php",
                data:formData,
                success:function(res){
                    if(res.code==1){
                        alert("添加成功");
                    }
                }
            });
        });
    });
</script>
</html>
